<template>
    <div>
        <el-breadcrumb
            separator-class="el-icon-arrow-right"
            class="breadcrumb-base"
            style="line-height: 30px"
        >
            <el-breadcrumb-item>
                <i class="el-icon-pie-chart"></i>
                切片总览
            </el-breadcrumb-item>
        </el-breadcrumb>

        <div class="main-container">

            <el-form label-width="70px">
                <el-row>
                    <el-col
                        :span="8"
                        v-for="item in sliceOverviewOfSliceHospitalSumList"
                        :key="item.index"
                        class="counts"
                    >
                        {{item.hospitalName}} : <span style="color:#008cc8"> {{item.hospitalCount}}</span> 已匹配 : {{item.matchSumCount}} 未匹配 : {{item.unMatchSumCount}}
                    </el-col>
                </el-row>
                <el-row style="margin-bottom:20px;">
                    <el-col :span="8">
                        <el-form-item label="上传时间">
                            <el-date-picker
                                size="mini"
                                style="max-width: 312px"
                                v-model="createdRange"
                                type="datetimerange"
                                range-separator="-"
                                start-placeholder="开始时间"
                                end-placeholder="结束时间"
                            >
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="医院名称">
                            <el-select
                                v-model="filterForm.sliceHospital"
                                placeholder="请选择医院"
                                clearable
                                class="picker-form"
                                size="mini"
                            >
                                <el-option
                                    v-for="item in hospitalList"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="2">
                        <el-form-item>
                            <el-button
                                size="mini"
                                type="primary"
                                @click="search"
                            >搜索</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <el-row>
                <el-row>
                    <el-col :span="12">

                        <div class="group-box">
<!--                            <div class="m-b-15">脏器分类</div>-->
                            <div class="m-b-15">疾病分类</div>
                            <el-col :span="12">
                                <div
                                    id="organPie"
                                    :style="{width: '100%', height: '250px'}"
                                ></div>
                            </el-col>
                            <el-col :span="12">
                                <el-table
                                    :data="tableDataSampleOrgan"
                                    border
                                    bordercolor="#70ad47"
                                    :header-cell-style="{
                                'background-color': '#E6E9EF',
                                'color': '#777C7C',
                                'font-weight': '400',
                                'font-size': '15px',
                                'border-right': '1px solid #70ad47',
                            }"
                                >
                                    <el-table-column
                                        prop="sampleOrganName"
                                        label="脏器"
                                        align="center"
                                    >
                                    </el-table-column>
                                    <el-table-column
                                        prop="count"
                                        label="总数"
                                        align="center"
                                    >
                                    </el-table-column>
                                    <el-table-column
                                        prop="aiCount"
                                        label="已标注数"
                                        align="center"
                                    >
                                    </el-table-column>
                                    <el-table-column
                                        prop="proportionStr"
                                        label="占比(%)"
                                        align="center"
                                    >
                                    </el-table-column>

                                </el-table>
                            </el-col>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="group-box">
<!--                            <div class="m-b-15">标本类别分类</div>-->
                            <div class="m-b-15">部位分类</div>
                            <el-col :span="12">
                                <div
                                    id="specimenCategoryPie"
                                    :style="{width: '100%', height: '250px'}"
                                ></div>
                            </el-col>
                            <el-col :span="12">
                                <el-table
                                    :data="tableDataSpecimenType"
                                    border
                                    bordercolor="#70ad47"
                                    :header-cell-style="{
                                'background-color': '#E6E9EF',
                                'color': '#777C7C',
                                'font-weight': '400',
                                'font-size': '15px',
                                'border-right': '1px solid #70ad47',
                            }"
                                >
                                    <el-table-column
                                        prop="specimenTypeName"
                                        label="标本类别"
                                        align="center"
                                    >
                                    </el-table-column>
                                    <el-table-column
                                        prop="count"
                                        label="总数"
                                        align="center"
                                    >
                                    </el-table-column>
                                    <el-table-column
                                        prop="aiCount"
                                        label="已标注数"
                                        align="center"
                                    >
                                    </el-table-column>
                                    <el-table-column
                                        prop="proportionStr"
                                        label="占比(%)"
                                        align="center"
                                    >
                                    </el-table-column>

                                </el-table>
                            </el-col>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <div class="group-box">
                            <div class="m-b-15">切片用途分类</div>
                            <el-col :span="12">
                                <div
                                    id="slicePurposePie"
                                    :style="{width: '100%', height: '250px'}"
                                ></div>
                            </el-col>
                            <el-col :span="12">
                                <el-table
                                    :data="tableDataSlicePurpose"
                                    border
                                    bordercolor="#70ad47"
                                    :header-cell-style="{
                                'background-color': '#E6E9EF',
                                'color': '#777C7C',
                                'font-weight': '400',
                                'font-size': '15px',
                                'border-right': '1px solid #70ad47',
                            }"
                                >
                                    <el-table-column
                                        prop="slicePurposeName"
                                        label="切片用途"
                                        align="center"
                                    >
                                    </el-table-column>
                                    <el-table-column
                                        prop="count"
                                        label="总数"
                                        align="center"
                                    >
                                    </el-table-column>
                                    <el-table-column
                                        prop="aiCount"
                                        label="已标注数"
                                        align="center"
                                    >
                                    </el-table-column>
                                    <el-table-column
                                        prop="proportionStr"
                                        label="占比(%)"
                                        align="center"
                                    >
                                    </el-table-column>

                                </el-table>
                            </el-col>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="group-box">
                            <div class="m-b-15">人体系统分类</div>
                            <el-col :span="12">
                                <div
                                    id="humanBodySystemPie"
                                    :style="{width: '100%', height: '250px'}"
                                ></div>
                            </el-col>
                            <el-col :span="12">
                                <el-table
                                    :data="tableDataHumanBodySystem"
                                    border
                                    bordercolor="#70ad47"
                                    :header-cell-style="{
                                'background-color': '#E6E9EF',
                                'color': '#777C7C',
                                'font-weight': '400',
                                'font-size': '15px',
                                'border-right': '1px solid #70ad47',
                                
                            }"
                                >
                                    <el-table-column
                                        prop="humanBodySystemName"
                                        label="人体系统"
                                        align="center"
                                    >
                                    </el-table-column>
                                    <el-table-column
                                        prop="count"
                                        label="总数"
                                        align="center"
                                    >
                                    </el-table-column>
                                    <el-table-column
                                        prop="aiCount"
                                        label="已标注数"
                                        align="center"
                                    >
                                    </el-table-column>
                                    <el-table-column
                                        prop="proportionStr"
                                        label="占比(%)"
                                        align="center"
                                    >
                                    </el-table-column>

                                </el-table>
                            </el-col>
                        </div>
                    </el-col>
                </el-row>
                <!-- <el-col :span="14">
                    <div class="chart-box">
                        <HomeBody
                            :hospitalId="filterForm.sliceHospital"
                            ref="homeBody"
                        ></HomeBody>
                    </div>
                </el-col> -->
            </el-row>
        </div>
    </div>
</template>

<script>
import echarts from '@/client/libs/echarts';
import moment from 'moment/moment';
import HomeBody from '@/client/templates/components/Body';
export default {
    name: 'sliceOverview',
    components: {
        HomeBody,
    },
    data() {
        return {
            createdRange: '',
            filterForm: {
                scanDateStart: '',
                scanDateEnd: '',
                sliceHospital: '',
                slicePurpose: '',
            },
            //table
            tableDataSampleOrgan: [],
            tableDataSpecimenType: [],
            tableDataSlicePurpose: [],
            tableDataHumanBodySystem: [],
            //pie
            organPieChartData: [],
            specimenCategoryPieChartData: [],
            slicePurposePieChartData: [],
            humanBodySystemPieChartData: [],
            dictRequestMap: [
                {
                    code: 'hospitalList',
                    arrayKey: 'hospitalList',
                },
            ],
            hospitalList: [],
            sliceOverviewOfSliceHospitalSumList: [],
        };
    },
    mounted() {
        this.dictionariesRequest();
        this.getPieData();
    },
    methods: {
        // 获取字典信息
        async dictionariesRequest() {
            await this.dictRequestMap.forEach((map) => {
                this.$axios({
                    method: 'GET',
                    url: '/PROXY-Remote/dicts/list',
                    params: {
                        code: map.code,
                        page: 0,
                        size: 99,
                    },
                }).then((res) => {
                    if (res && res.data.code === 200) {
                        this[map.arrayKey] = _.clone(res.data.data);
                    }
                });
            });
        },
        search() {
            this.getPieData();
            // this.$refs.homeBody.getChartData();
        },
        getPieData() {
            if (this.createdRange && this.createdRange.length > 0) {
                this.filterForm.scanDateStart = moment(this.createdRange[0])
                    .utcOffset('+08:00')
                    .format('YYYY-MM-DD HH:mm:ss');
                this.filterForm.scanDateEnd = moment(this.createdRange[1])
                    .utcOffset('+08:00')
                    .format('YYYY-MM-DD HH:mm:ss');
            } else {
                this.filterForm.scanDateStart = '';
                this.filterForm.scanDateEnd = '';
            }

            this.$axios({
                method: 'POST',
                url: '/PROXY-Remote/biopsy/sliceOverviewForSubjectAcceptance',
                data: this.filterForm,
            }).then((res) => {
                if (res && res.data.code === 200) {
                    //table
                    this.tableDataSampleOrgan =
                        res.data.data.sliceOverviewOfSampleOrganIdForSubjectAcceptanceList;
                    this.tableDataSpecimenType =
                      res.data.data.sliceOverviewOfSpecimenTypeForSubjectAcceptanceList;
                    this.tableDataSlicePurpose =
                      res.data.data.sliceOverviewOfSlicePurposeForSubjectAcceptanceList;
                    this.tableDataHumanBodySystem =
                      res.data.data.sliceOverviewOfHumanBodySystemForSubjectAcceptanceList;

                    //pie
                    this.organPieChartData = [];
                    this.specimenCategoryPieChartData = [];
                    this.slicePurposePieChartData = [];
                    this.humanBodySystemPieChartData = [];

                    this.sliceOverviewOfSliceHospitalSumList =
                        res.data.data.sliceOverviewOfSliceHospitalSumForSubjectAcceptanceList;

                  this.tableDataSampleOrgan
                        .slice(0, -1)
                        .forEach((item) => {
                            this.organPieChartData.push({
                                name: item.sampleOrganName,
                                value: item.count,
                            });
                        });
                    this.tableDataSpecimenType
                        .slice(0, -1)
                        .forEach((item) => {
                            this.specimenCategoryPieChartData.push({
                                name: item.specimenTypeName,
                                value: item.count,
                            });
                        });
                  this.tableDataSlicePurpose
                        .slice(0, -1)
                        .forEach((item) => {
                            this.slicePurposePieChartData.push({
                                name: item.slicePurposeName,
                                value: item.count,
                            });
                        });
                  this.tableDataHumanBodySystem
                        .slice(0, -1)
                        .forEach((item) => {
                            this.humanBodySystemPieChartData.push({
                                name: item.humanBodySystemName,
                                value: item.count,
                            });
                        });
                    this.drawPie();
                }
            });
        },
        drawPie() {
            const organPieChart = echarts.init(
                document.getElementById('organPie')
            );
            organPieChart.setOption({
                tooltip: {
                    trigger: 'item',
                    formatter: '{b} : {c} ( {d}% )',
                },
                series: [
                    {
                        name: '脏器分类',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '50%'],
                        data: this.organPieChartData,
                        label: {
                            formatter: '{b}',
                        },
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)',
                            },
                        },
                    },
                ],
            });
            const specimenCategoryPieChart = echarts.init(
                document.getElementById('specimenCategoryPie')
            );
            specimenCategoryPieChart.setOption({
                tooltip: {
                    trigger: 'item',
                    formatter: '{b} : {c} ( {d}% )',
                },
                series: [
                    {
                        name: '脏器分类',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '50%'],
                        data: this.specimenCategoryPieChartData,
                        label: {
                            formatter: '{b}',
                        },
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)',
                            },
                        },
                    },
                ],
            });
            const slicePurposePieChart = echarts.init(
                document.getElementById('slicePurposePie')
            );
            slicePurposePieChart.setOption({
                tooltip: {
                    trigger: 'item',
                    formatter: '{b} : {c} ( {d}% )',
                },
                series: [
                    {
                        name: '切片用途',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '50%'],
                        data: this.slicePurposePieChartData,
                        label: {
                            formatter: '{b}',
                        },
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)',
                            },
                        },
                    },
                ],
            });
            const humanBodySystemPieChart = echarts.init(
                document.getElementById('humanBodySystemPie')
            );
            humanBodySystemPieChart.setOption({
                tooltip: {
                    trigger: 'item',
                    formatter: '{b} : {c} ( {d}% )',
                },
                series: [
                    {
                        name: '人体系统分类',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '50%'],
                        data: this.humanBodySystemPieChartData,
                        label: {
                            formatter: '{b}',
                        },
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)',
                            },
                        },
                    },
                ],
            });
        },
    },
};
</script>

<style scoped>
.group-box {
    width: calc(100% - 10px);
    min-height: 300px;
    background: #fff;
}
.counts {
    margin-bottom: 20px;
}
.m-b-15 {
    margin-bottom: 20px;
    text-align: center;
}
</style>